import React, { Component } from 'react'

import { connect } from 'react-redux'

import { removeAction, setdataAction, loaddataAction  } from './store/actionCreator'

// 映射State到当前组件的Props上
const mapStateToProps = (state) => {
  return {
    list: state.list
  }
}
// 映射Dispatch到当前组件的Props上
const mapDispatchToProps = dispatch => {
  return {
    remove(index) {
      dispatch(removeAction(index))
      // dispatch({
      //   type: 'REMOVE_DATA',
      //   index
      // })
    },

    setData(data) {
      dispatch(setdataAction(data))
    },

    loadData() {
      dispatch(loaddataAction())
    }
  }
}

// 利用高阶组件增强组件的能力
// 这个方法的返回值是高阶组件
// @connect(mapStateToProps)
@connect(mapStateToProps, mapDispatchToProps)
class List extends Component {

  handleClick = index => {
    // 传参写 return
    return () => {
      this.props.remove(index)
    }
  }

  render() {
    return (
      <div>
        <ul>
          {
           this.props.list.map((value, index) => {
            //  todo 取ajaxc请求回来的值
             return (
              <li key={index}>{value} <button onClick={this.handleClick(index)}>X</button></li>
             )
           })
          }
        </ul>
      </div>
    )
  }
  componentDidMount() {
    // console.log(this)
    // fetch('/position.json').then(response => response.json())
    // .then(retult => {
    //   this.props.setData(result.result)
    // })

    this.props.setData(0)

    // this.props.loadData()
  }
}


// 这个connect方法第一次调用的返回值是个高阶组件
// export default connect(mapStateToProps)(List)
export default List
